<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>智能化专注力训练</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }

        body {
            background: #f0f3f5;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px 20px 100px; /* 增加底部内边距 */
            position: relative;
        }

        .header {
            text-align: center;
            padding: 30px 20px;
            color: #2c3e50;
            width: 100%;
        }

        .title {
            font-size: 2.5rem;
            margin-bottom: 15px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
        }

        .main-content {
            width: 100%;
            max-width: 1200px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex: 1;
        }

        .grid-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
            padding: 20px;
            width: 100%;
            margin-bottom: 30px;
        }

        .training-card {
            background: white;
            border-radius: 20px;
            padding: 25px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
            min-height: 180px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .training-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.15);
        }

        .card-title {
            font-size: 1.8rem;
            color: #3498db;
            margin-bottom: 15px;
        }

        /* 不同卡片颜色 */
        .card-1 { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
        .card-2 { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }
        .card-3 { background: linear-gradient(135deg, #c2e9fb 0%, #a1c4fd 100%); }
        .card-4 { background: linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%); }
        .card-5 { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
        .card-6 { background: linear-gradient(135deg, #5ee7df 0%, #b490ca 100%); }

        /* 咨询服务按钮容器 */
        .consult-container {
            width: 100%;
            max-width: 1200px;
            padding: 0 20px;
            margin-top: auto; /* 将按钮推到内容底部 */
            margin-bottom: 40px;
            text-align: center;
        }

        /* 咨询服务按钮 */
        .consult-btn {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 16px 35px;
            font-size: 1.2rem;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            width: auto;
            min-width: 280px;
        }

        .consult-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }

        /* 底部文字样式 */
        .footer {
            text-align: center;
            padding: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: #f0f3f5;
        }

        .footer p {
            margin: 5px 0;
        }

        @media (max-width: 768px) {
            body {
                padding-bottom: 120px; /* 移动端增加更多底部空间 */
            }
            
            .grid-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .title {
                font-size: 2rem;
            }
            
            .card-title {
                font-size: 1.5rem;
            }
            
            .training-card {
                padding: 20px;
                min-height: 150px;
            }
            
            .consult-btn {
                padding: 14px 30px;
                font-size: 1.1rem;
                min-width: 240px;
            }
        }

        @media (max-width: 480px) {
            .title {
                font-size: 1.8rem;
            }
            
            .card-title {
                font-size: 1.3rem;
            }
            
            .training-card p {
                font-size: 0.9rem;
            }
            
            .consult-btn {
                width: 90%;
                padding: 12px 20px;
                font-size: 1rem;
                min-width: auto;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1 class="title">智能化专注力训练</h1>
    </div>

    <div class="main-content">
        <div class="grid-container">
            <div class="training-card card-1" onclick="window.open('舒尔特方格.html')">
                <h2 class="card-title">舒尔特方格</h2>
                <p>经典注意力训练方法</p>
            </div>

            <div class="training-card card-2" onclick="window.open('虎商训练.html')">
                <h2 class="card-title">虎商训练</h2>
                <p>数字顺序点选挑战</p>
            </div>

            <div class="training-card card-3" onclick="window.open('正听反说.html')">
                <h2 class="card-title">正听反说</h2>
                <p>听觉记忆反向复述</p>
            </div>
            
            <div class="training-card card-4" onclick="window.open('圆点闪记.html')">
                <h2 class="card-title">圆点闪记</h2>
                <p>快速记忆圆点数量</p>
            </div>
            
            <div class="training-card card-5" onclick="window.open('视觉追踪.html')">
                <h2 class="card-title">视觉追踪</h2>
                <p>追踪移动目标训练</p>
            </div>
            
            <div class="training-card card-6" onclick="window.open('专注力测试.html')">
                <h2 class="card-title">专注力测试</h2>
                <p>划消测试评估专注力</p>
            </div>
        </div>
        
        <div class="consult-container">
            <a href="https://example.com/consult" class="consult-btn" target="_blank">专注力咨询服务</a>
        </div>
    </div>

    <div class="footer">
        <p>设计人：吴东，未经许可请勿商用。</p>
        <p>© 2025 富士康烟台助学项目--专注力训练</p>
    </div>
</body>
</html>